<template>
  <div class="forgetPassword">
    <div class="headercolor">
      <!-- 头部组件引入 -->
      <my-header title="找回密码">
        <!-- 左侧区域内容 -->
        <template #left>
          <div class="iconmin" @click="go">
            <img src="../../../static/images/login/icon.png" alt="" />
          </div>
        </template>
      </my-header>
    </div>
    <loginpublic :phone="userphone" :password="password" :user=3>
      <template #inputslot>
        <van-field @blur="sendcode" v-model="userphone" placeholder="请输入手机号" :rules="[{ required: true, message: '' }]"/>
        <van-field v-model="number" :maxlength="6" placeholder="请输入验证码" :rules="[{ required: true, message: '' }]"/>
        <!-- 获取验证码 -->
        <div class="num">
          <button type="button" :disabled="disabled" class="btns" @click="vie()"> {{ btntxt }}</button>
          <!-- 眼睛图标 -->
          <img src="../../../static/images/login/eye.png" alt="" class="imgicon" @click="changType"/>
        </div>
        <van-field v-model="password" maxlength="6" @blur="passwordf()" :type="flag == true ? 'password' : 'text'" placeholder="请输入密码" :rules="[{ required: true, message: '' }]" />
      </template>
      <!-- 确定 -->
      <template #btn> 确定 </template>
    </loginpublic>
  </div>
</template>

<script>
import MyHeader from "../../components/myHeader/myHeader.vue";
import loginpublic from "./loginpublic.vue";
export default {
  components: { loginpublic, MyHeader },
  data() {
    return {
      userphone: "",
      number: "",
      password: "",
      type: "password",
      flag: true,
      disabled: false,
      time: 0,
      user:'',
      btntxt: "获取验证码",
      formMess: {
        userphone: this.userphone,
      },
    };
  },
  methods: {
    changType() {
      //密码显示隐藏
      this.flag = !this.flag;
    },
    sendcode() {
       var reg = /^1[34578]\d{9}$/;
      if (this.userphone == "") {
        this.$toast('手机号不能为空');
        return false;
      } else if (!reg.test(this.userphone)) {
        this.$toast('手机号码格式不正确');
      }else{
        return true;
      }
    },
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s后重新获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    },
      passwordf(){
       var reg = /^[0-9]{6}$/;
      if (this.password == "") {
        this.$toast('密码不能为空');
        return false;
      } else if (!reg.test(this.password)) {
         this.$toast('密码必须是6位数字');
         return false;
      }else{
        return true;
      }
    },
    vie() {
      this.time = 60;
      this.disabled = true;
      this.timer();
    },
    // 返回上一页
    go() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.forgetPassword {
  /deep/.van-cell {
    height: 90px;
  }
  /deep/.van-field__control {
    width: 203px;
    height: 32px;
    font-size: 32px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #232323;
    line-height: 60px;
    opacity: 0.6;
  }
  /deep/ .van-nav-bar__title {
    color: #ffffff;
  }
  .headercolor {
    background-color: red;
  }
  .num {
    position: relative;
    img {
      width: 150px;
      height: 39px;
      position: absolute;
      right: 63px;
      top: -60px;
    }
    .imgicon {
      width: 40px;
      height: 30px;
      position: absolute;
      right: 63px;
      top: 30px;
      z-index: 2;
    }
    .btns {
      background-color: #cccdce;
      width: 170px;
      height: 40px;
      border-radius: 10px;
      padding: 0px 5px;
      font-size: 20px;
      color: #ffffff;
      position: absolute;
      top: -65px;
      right: 80px;
    }
  }
  .iconmin {
    img {
      width: 60px;
    }
  }
}
</style>